<template>
  <div>
    <el-select
      v-model="copySelectValue"
      style="width: 250px; margin-bottom: 10px"
      @change="change"
    >
      <el-option
        v-for="item in ancestorComboList"
        :key="item.value"
        :label="item.text"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <TableUse
      v-loading="loading"
      :data="tableList"
      max-height="400px"
      ref="table"
      :tableConfig="tableConfig"
      :name="'componentId'"
      @selection-change="chooseList"
    >
      <template v-slot:readonly="scope">
        <div>
          {{ scope.row.readonly ? "是" : "否" }}
        </div>
      </template>
      <template v-slot:hidden="scope">
        <div>
          {{ scope.row.readonly ? "是" : "否" }}
        </div>
      </template>
    </TableUse>
    <div style="margin-top: 10px; text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import {
  copyModelViewApi,
  getAncestorComboListApi,
  getComponentListApi
} from '@/api/Device-all/Device-view'
import TableUse from '../../components/TableUse.vue'
export default {
  components: { TableUse },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      copySelectValue: '',
      loading: false,
      form: {},
      defaultList: [],
      tableList: [],
      ancestorComboList: [],
      tableConfig: [
        {
          width: '100px',
          align: 'left',
          prop: 'panelName',
          label: '视图面板'
        },
        {
          align: 'left',
          prop: 'componentLabel',
          label: '组件编码'
        },
        {
          align: 'left',
          prop: 'componentName',
          label: '组件名称'
        },
        {
          align: 'left',
          prop: 'componentType',
          label: '组件类型'
        },
        {
          width: '80px',
          align: 'center',
          prop: 'readonly',
          label: '是否只读'
        },
        {
          width: '80px',
          align: 'center',
          prop: 'hidden',
          label: '是否隐藏'
        }
      ]
    }
  },
  mounted () {
    this.getAncestorComboList()
  },
  methods: {
    // 查询上级设备模型下拉框选项列表
    async getAncestorComboList () {
      const res = await getAncestorComboListApi(this.data.classId)
      this.ancestorComboList = res.data.list
    },
    change (val) {
      console.log(val)
      this.getComponentList(val)
    },
    async submit () {
      const res = await copyModelViewApi({
        classId: this.data.classId,
        componentId: this.form.componentId
      })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.diaClose()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    // 查询设备模型视图组件列表
    async getComponentList (id) {
      this.loading = true
      const res = await getComponentListApi(id)
      console.log(res)
      this.tableList = res.data.list
      this.loading = false
    },
    chooseList (arr) {
      console.log(arr)

      this.form.componentId = arr

      // this.form.classPropertyId = arr.join(',')
      // this.form.propertyId = arr.join(',')
    },
    diaClose () {
      this.$emit('diaClose')
    }
  }
}
</script>

<style lang="scss" scoped></style>
